<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-01-31 16:57:28
-->
<template>
    <div class="mv">
        <!-- 顶部分类标签 -->
        <div class="tags">
            <TagsBar :taglist="info.areaList" @tagBarClick="areaClick"></TagsBar>
            <TagsBar :taglist="info.typeList" @tagBarClick="typeClick"></TagsBar>
            <TagsBar :taglist="info.orderList" @tagBarClick="orderClick"></TagsBar>
        </div>
        <!-- mv列表 -->
        <div class="mv-list">
            <div class="list-item" v-for="(item, index) in info.mvList" :key="item.id">
                <mvlist :item="item"></mvlist>
            </div>
        </div>

        <div class="loading" v-if="info.mvList.length === 0">数据正在加载中~</div>
    </div>
</template>

<script setup>
import TagsBar from '../../../components/TagsBar.vue';
import { ref, reactive, onMounted, onActivated, onDeactivated } from 'vue'
import { getAllMv } from '@/api/recvideo/recvideo.js'
import mvlist from '@/components/content/MVlist/mvlist.vue'
import { debounce } from '@/utils/utils.js'
const info = reactive({
    // 地区列表
    areaList: {
        category: '地区',
        list: ['全部', '内地', '港台', '欧美', '日本', '韩国']
    },
    //类型列表
    typeList: {
        category: '类型',
        list: ['全部', '官方版', '原声', '现场版', '网易出品']
    },
    //排序
    orderList: {
        category: '排序',
        list: ['上升最快', '最热', '最新']
    },
    // 保存mv的列表
    mvList: [],
    totalCount: 0,  //一共有多少mv
    //每页
    limit: 40,
    area: '全部',  //地区
    type: '全部',  //类型
    order: '上升最快', //排序
    page: 1, //当前页
    hasMore: false,  //数据是否还有
    ishow: false,  //是否展示分页器
})

//获取相关mv数据
async function getAllBy(area, type, order, page) {
    let offset = (page - 1) * info.limit
    let res = await getAllMv(area, type, order, info.limit, offset)
    if (res.data.code === 200) {  //成功
        if (page === 1)
            info.totalCount = res.data.count  //保存该种mv一共有多少数量

        if (info.mvList.length < info.totalCount) {  //如果还有数据
            info.mvList.push(...res.data.data)  //解构每一项然后添加
            info.hasMore = res.data.hasMore
            info.page += 1
        }
    }
}

//标签点击事件  回调事件
function areaClick(item) {
    info.page = 1
    info.mvList = []
    info.area = item
    getAllBy(item, info.type, info.order, info.page)
}
function typeClick(item) {
    info.page = 1
    info.mvList = []
    info.type = item
    getAllBy(info.area, item, info.order, info.page)
}
function orderClick(item) {
    info.page = 1
    info.mvList = []
    info.order = item
    getAllBy(info.area, info.type, item, info.page)
}

//拉到底部再次获取数据
function load() {
    if (info.hasMore === false)  //如果发现没有数据就不再发送请求
        return;
    let view = document.querySelector('.view')
    if (Math.ceil(view.scrollTop) + view.clientHeight >= view.scrollHeight) {
        // console.log('load发送请求');
        getAllBy(info.area, info.type, info.order, info.page)
    }
}
onMounted(() => {
    getAllBy('全部', '全部', '上升最快', 1)
})

//#region 
//因为组件会被缓存，所以下面生命钩子会起作用    
onActivated(() => {   //页面被激活后的钩子
    // console.log('调用了activated');
    //监听页面滚动
    document.querySelector('.view').addEventListener('scroll', debounce(load, 500, true))
})

//#region 
//缓存组件被停用时触发
onDeactivated(() => {
    //使用防抖函数
    document.querySelector('.view').removeEventListener('scroll', load) //除去监听事件
})
//#endregion

</script>

<style lang="scss" scoped>
.mv {
    .mv-list {
        margin-top: 20px;
        margin-left: 10px;
        display: grid;
        justify-content: space-between;
        grid-template-rows: repeat(10, auto-fill);
        grid-template-columns: repeat(4, 24%);

        .list-item {
            margin-bottom: 20px;
        }
    }

    .loading {
        display: flex;
        justify-content: center;
        margin-top: 100px;
        font-size: 18px;
        color: #676767;

    }
}
</style>